<template>
  <div class="body">
    <el-row style="height: 40px; background-color: skyblue">
      <el-col
        :span="12"
        style="
          font-size: 20px;
          font-weight: 700;
          line-height: 40px;
          margin-left: 30px;
          color: #eee;
        "
        >音乐播放器</el-col
      >
      <el-col :span="10">
        <input
          type="text"
          v-model="musicName"
          @keyup.enter="search"
          style="
            width: 200px;
            height: 20px;
            margin-top: 5px;
            border-radius: 5px;
          "
        />
      </el-col>
    </el-row>

    <el-row>
      <!-- 歌曲列表 -->
      <el-col
        :span="6"
        style="
          padding: 5px;
          height: 538px;
          overflow: hidden;
          overflow-y: scroll;
        "
      >
        <div v-for="item in musicList" style="display: flex">
          <span @click="playMusic(item.id)"
            ><el-icon><Service /></el-icon
          ></span>
          <div style="width: 170px; margin-left: 10px; font-size: 14px">
            {{ item.name }}
          </div>
          <span @click="getMusicMv(item.id)" v-if="item.mv != 0"
            ><el-icon @click="show"><VideoCameraFilled /></el-icon
          ></span>
        </div>
      </el-col>
      <!-- 歌曲专辑 -->
      <el-col :span="12">
        <img
          :src="musicMessage"
          alt=""
          style="
            width: 360px;
            border-radius: 50%;
            margin-left: 60px;
            margin-top: 80px;
          "
        />
      </el-col>
      <!-- 歌曲评论 -->
      <el-col
        :span="6"
        style="
          height: 538px;
          overflow: hidden;
          overflow-y: scroll;
          border-left: 1px solid #ccc;
          padding-left: 15px;
        "
      >
        <h3 style="color: skyblue">热门评论</h3>
        <div v-for="item in hotComments">
          <img
            :src="item.user.avatarUrl"
            alt=""
            style="
              width: 30px;
              border-radius: 50%;
              margin-right: 10px;
              float: left;
            "
          />
          <div
            style="
              color: #000;
              font-weight: 600;
              float: left;
              margin-top: 5px;
              font-size: 14px;
            "
          >
            {{ item.user.nickname }}
          </div>
          <br /><br />
          <div style="font-size: 13px; margin-bottom: 10px">
            {{ item.content }}
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 音乐播放器 -->
    <audio
      controls
      :src="musicUrl"
      autostart="true"
      loop="true"
      ref="audio"
      autoplay
      class="music"
      style="margin-top: 15px"
    ></audio>
    <!-- 视频播放器 -->
    <video
      :src="musicMv"
      v-if="isShow"
      controls
      autoplay
      width="1200"
      height="600"
      style="position: absolute; top: 100px; left: 200px"
    ></video>
    <el-icon
      @click="isShow = false"
      style="
        font-size: 30px;
        position: absolute;
        top: 110px;
        right: 160px;
        color: #ccc;
      "
      v-if="isShow"
      ><Close
    /></el-icon>
  </div>
</template>

<script>
import { ref } from "vue";
import axios from "axios";
export default {
  setup() {
    const musicName = ref("");
    const musicList = ref("");
    const musicUrl = ref("");
    const musicMessage = ref("");
    const hotComments = ref("");
    const musicMv = ref("");
    const isShow = ref(false);
    const show = () => {
      isShow.value = true;
    };
    // 获取音乐列表
    const search = () => {
      axios
        .get("https://autumnfish.cn/search?keywords=" + musicName.value)
        .then((res) => {
          // console.log(res);
          console.log(res.data.result.songs);
          musicList.value = res.data.result.songs;
        });
    };
    // 获取音乐地址
    const playMusic = (id) => {
      axios.get("https://autumnfish.cn/song/url?id=" + id).then((res) => {
        // console.log(res);
        // console.log(res.data.data[0].url);
        musicUrl.value = res.data.data[0].url;
      });
      // 获取歌曲详情
      axios.get("https://autumnfish.cn/song/detail?ids=" + id).then((res) => {
        // console.log(res);
        // console.log("获取歌曲详情", res.data.songs[0].al.picUrl);
        musicMessage.value = res.data.songs[0].al.picUrl;
      });
      // 获取热门评论
      axios
        .get("https://autumnfish.cn/comment/hot?type=0&id=" + id)
        .then((res) => {
          // console.log(res);
          // console.log("获取热门评论", res.data.hotComments);
          hotComments.value = res.data.hotComments;
        });
    };
    const getMusicMv = (id) => {
      axios.get("https://autumnfish.cn/mv/url?id=" + id).then((res) => {
        // console.log(res);
        console.log(res.data.data.url);
        musicMv.value = res.data.data.url;
      });
    };
    return {
      search,
      musicName,
      musicList,
      playMusic,
      musicUrl,
      musicMessage,
      musicMv,
      hotComments,
      getMusicMv,
      isShow,
      show,
    };
  },
};
</script>

<style scoped>
.body {
  width: 1000px;
  height: 580px;
  margin: 0 auto;
  border: 1px solid #000;
}
.music {
  width: 1000px;
}
</style>